//--------------------------------------侧边栏下拉
    // 按钮
    let dropdownBtn = document.getElementById("btn");
    // 下拉
    let dropdownMenu = document.getElementById("dropdown");
    // 旋钮
    let toggleArrow = document.getElementById("arrow");

    let toggleDropdown = function () {
        dropdownMenu.classList.toggle("show");
        toggleArrow.classList.toggle("arrow");
    };

    dropdownBtn.addEventListener("click", function (e) {
        e.stopPropagation();
        toggleDropdown();
    });

//--------------------------------------下拉结束

//---------------------------------------表单
//后端数据



let tbody = document.querySelector('tbody');

//渲染动态数据到表格里
getBook();

function getBook(){
    //清空文本
    tbody.innerHTML ="";
    arr.forEach((item,index)=>{
        let tr = document.createElement('tr');
        tr.innerHTML = `
            <td>${arr[index].bookId}</td>
            <td>${arr[index].Number}</td>
            <td>${arr[index].bookName}</td>
            <td>${arr[index].bookCity}</td>
            <td>${arr[index].getTime}</td>
            <td>${arr[index].returnTime}</td>
        `;
        tbody.appendChild(tr);
    });
}

document.querySelector('.add').addEventListener('click',e =>{
    //阻止表单自带的跳转
    e.preventDefault();
    //---------------------新增------------------//
    let bookId = + arr[arr.length-1].bookId+1  //书籍id使用数组的最后一个值+1
    let Number = document.querySelector('.Number').value.trim()
    let bookName = document.querySelector('.bookName').value.trim()
    let bookCity = document.querySelector('.bookCity').value.trim()
    let getTime = document.querySelector('.getTime').value.trim()
    let returnTime = document.querySelector('.returnTime').value.trim()

    if(Number === 0 || bookName === 0 || bookCity === 0 ||getTime === 0 || returnTime === 0){
        alert("表单内容不完整");
    }

    arr.push(
        {
            bookId:bookId++,
            Number:Number,
            bookName:bookName,
            bookCity:bookCity,
            getTime:getTime,
            returnTime:returnTime
        }
    );
    getBook();
    //-------------------------------取消---------------------------------//
        
    // -----------------------------结束取消--------------------------------//

    //-----------------提交内容后充值表单内容---------
    document.querySelector('form').reset();
})
// -------------------------------------表单结束----------------